<template>
  <div class="cartcontrol">
      <transition name="move">
        <div class="cart-decrease" v-show="food.count>0" @click="decreaseCart()">
            <img  src="./decrease.png">
        </div>
      </transition>
      <div class="cart-count" v-show="food.count>0">{{food.count}}</div>
      
      <div class="cart-add" @click="addCart()">
          <img src="./add.png">
      </div>
  </div>
</template>

<script>
export default {
    props:{
        food:{
            type:Object,
            default:{}
        }
    },
    methods:{
         addCart(){
             if(!this.food.count){
                this.$set(this.food,'count',1)
                 this.food.count=1;
             }else{
                 this.food.count++;
             }
         },
         decreaseCart(){
             if(this.food.count){
                 this.food.count--;
             }
         }
    }
}
</script>
<style>
.cartcontrol .cart-decrease,.cartcontrol .cart-add,.cartcontrol .cart-count{
    display: inline-block;
    font-size: 12px;
    line-height: 16px;
    /* height: 16px; */
    vertical-align: top;
    color: rgb(7,17,27);
 }
.cartcontrol .cart-decrease,.cartcontrol .cart-add{ 
    width:16px;
    height: 16px;
}
.cartcontrol .cart-decrease img,.cartcontrol .cart-add img{
    width: 100%
}
.cartcontrol .cart-count{
    font-size: 10px;
    width: 12px;
    font-size: 10px;
    color: rgb( 147,153, 159);
}
.move-transition{
    opacity: 1;
    transform: translate3d(0,0,0);
}
.cartcontrol .cart-decrease {
    transition:  all 0.4s linear;
}

.move-enter-active,.move-leave-active{
    opacity: 0;
    transform: translate3d(24px,0,0) rotate(180deg);
}


</style>

